<script setup>
import {
  ElContainer,
  ElHeader,
  ElMain,
  ElFooter,
  ElMenu,
  ElMenuItem,
  ElTable,
  ElTableColumn,
  ElButton,
  ElMessage,
  ElPopconfirm,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadioGroup,
  ElRadio,
  ElDatePicker
} from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import moment from 'moment';

const router = useRouter();

const customer = reactive({
  id: '',
  email: '',
  tel: '',
  birthdate: '',
  married: ''
});

const customers = reactive([]);

const dialogVisible = ref(false);

const form = reactive({
  id: '',
  email: '',
  tel: '',
  birthdate: '',
  married: ''
});

const token = sessionStorage.getItem('token');

function loadOne() {
  axios.get('/backapi/customer/find', {
    headers: {
      authorization: token
    }
  }).then( resp => {
    Object.assign( customer, resp.data );
  }).catch( reason => {
    ElMessage.error(reason);
  });
}

loadOne();

// 加载所有用户信息
function loadAll() {
  customers.length = 0 ;
  // 发送请求并携带指定的请求头
  axios.get('/backapi/customer/find/all', {
    headers: {
      authorization: token
    }
  }).then( resp => {
    const results = resp.data;
    customers.push( ...results );
  }).catch( reason => {
    ElMessage.error(reason);
  });
}

loadAll();

function detail(customer) {
  // router.push(`/detail/${customer.id}`)
  router.push( { name: 'detail', params: { id: customer.id } } );
}

function edit(customer) {
  Object.assign(form ,customer);
  form.married = form.married == '已婚' ? 'Y' : 'N';
  dialogVisible.value = true;
}

function cancel(){
  dialogVisible.value = false;
}

function confirm(){
  const data = { ...form };
  data.birthdate = moment(data.birthdate).format('YYYY-MM-DD');
  axios.put('/backapi/customer/update', data, {
    headers: {
      authorization: token
    }
  }).then( resp => {
    const { success, message } = resp.data;
    if( success ) {
      dialogVisible.value = false;
      ElMessage({ type: 'success', message });
      loadAll();
      return;
    }
    ElMessage({ type: 'warning', message });
  }).catch( reason => {
    ElMessage.error(reason);
  })
}

function remove(id) {
  axios.delete(`/backapi/customer/remove/${id}`, {
    headers: {
      authorization: token
    }
  }).then( resp => {
    const { success, message } = resp.data;
    if( success ) {
      loadAll();
      return;
    }
    ElMessage({type:'warning', message});
  }).catch( reason => {
    ElMessage.error(reason);
  })
}

</script>

<template>
  <el-container>
    <el-header>
      <el-menu mode="horizontal" :router="true">
        <el-menu-item index="/">{{ customer.email }}</el-menu-item>
        <el-menu-item index="/logout">注销</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <el-table :data="customers" style="width: 100%">
        <el-table-column fixed label="序号" width="100" >
          <template #default="{$index}">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="tel" label="手机号" width="200" />
        <el-table-column prop="birthdate" label="出生日期" width="200" />
        <el-table-column prop="married" label="婚否" width="200" />
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="{row}">
            <el-button type="primary" link @click="detail(row)">详情</el-button>
            <el-button type="primary" link @click="edit(row)">编辑</el-button>
            <el-popconfirm title="确定要删除吗?" 
                           confirm-button-text="确定"
                           cancel-button-text="取消"
                           @confirm="remove(row.id)"
                           v-if="row.id != customer.id">
              <template #reference>
                <el-button type="primary" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      &copy; 开发喵
    </el-footer>
    <el-dialog v-model="dialogVisible" width="30%" center>
      <template #header>
        编辑用户
      </template>
      <template #default>
        <el-form :model="form" label-width="100px">
          <el-form-item label="邮箱">
            <el-input v-model="form.email"/>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.tel"/>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker v-model="form.birthdate"/>
          </el-form-item>
          <el-form-item label="婚姻状况">
            <el-radio-group v-model="form.married">
              <el-radio label="Y">已婚</el-radio>
              <el-radio label="N">单身</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </template>
    </el-dialog>
  </el-container>
</template>

<style scoped>

</style>